<template>
  <div class="login-container">
    <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
    >
    </vue-particles>
    <div class="login-box">
      <div class="log-img">
        <img src="@/assets/imgs/logo.png" alt="">
      </div>
      <div class="login-form">
        <el-form status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="loginMthod">
          <el-form-item label="账号">
            <el-input type="username" v-model="loginData.username" autocomplete="off" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="loginData.password" autocomplete="off" maxlength="16"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="loginbutton">
              <el-button type="primary" @click="loginForm()">登录</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </div>
          </el-form-item>
        </el-form>


        <el-form status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm" v-if="!loginMthod">
          <el-form-item label="邮箱" >
            <el-row gutter="25">
              <el-col :span="18"><el-input type="username" v-model="emailData.email" autocomplete="off" maxlength="22" label-width="100px"></el-input></el-col>
              <el-col :span="6"><el-button type="primary" size="small" @click="getCode()" ref="getCode" id="getCode" >获取验证码</el-button></el-col>
            </el-row>


          </el-form-item>
          <el-form-item label="验证码">
            <el-row gutter="25">
              <el-col :span="18"><el-input type="password" v-model="emailData.vaCode" autocomplete="off" maxlength="6"></el-input></el-col>
              <el-col></el-col>
            </el-row>

          </el-form-item>
          <el-form-item>
            <div class="loginbutton">
              <el-button type="primary" @click="loginForm()">登录</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div id="login-method">
        <div id="bypwd" :class="{checkmethod:loginMthod}" @click="checkLogin()">
          密码登录
        </div>
        <div id="byemail" :class="{checkmethod:!loginMthod}" @click="checkLogin()">
          邮箱登录
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { ref } from "vue"
import {getCurrentInstance} from "vue"
import { ElMessage } from 'element-plus'
import { userlogin,getEmailCode,loginByEmail } from "@/api/user";

export default {
  name: "Login",
  data(){
    return{
      loginData:{username:"",password: ""},
      emailData:{email:"",vacode: ""},
      loginMthod:true,
      validate: {
        checkUsername:()=>{
          //console.log(username)
          if (!this.loginData.username){
            ElMessage.error("请输入用户名")
            return false
          }else if(this.loginData.username.length > 10 || this.loginData.username.length < 6){
            ElMessage.error("请输入正确的用户名")
            return false
          }
          return true
        },
        checkPassword:()=>{
          //console.log(password)
          if (!this.loginData.password){
            ElMessage.error("请输入密码")
            return false
          }else if(this.loginData.password.length > 16 || this.loginData.password.length < 6){
            ElMessage.error("请输入正确密码")
            return false
          }
          return true
        }
      }
    }
  },
  methods:{
    // 登录方法
    loginForm(){
      if(this.loginMthod){
        if(this.validate.checkUsername() && this.validate.checkPassword()){
          userlogin(this.loginData).then(res=>{
            if(res.data.success === true){
              console.log(res.data.data)
              window.sessionStorage.setItem("ass_token",res.data.data.ass_token)
              this.$router.push("/welcome")
            }else{
              this.$message.error(res.data.msg)
            }
          }).catch(err=>{
            // todo 邮箱登录还没做
            this.$message.error("请求服务器失败")
          })
        }
      }else {
        loginByEmail(this.emailData).then(res=>{
          this.$message.error(res.data.msg)
          if(res.data.success === false){
            return
          }else{
            window.sessionStorage.setItem("ass_token",res.data.data.ass_token)
            this.$router.push("/welcome")
          }
          console.log(res)
        }).catch(err=>{
          this.$message.error("请求服务器失败")
          console.log(err)
        })
        // this.$message.warning("邮箱登录还没写好")
      }

    },
    // 重置表单方法
    resetForm(){
      this.loginData.username = ""
      this.loginData.password = ""
    },
    // 切换选择登陆方式
    checkLogin(){
      this.loginMthod = !this.loginMthod
    },
    // 获取邮箱验证码
    getCode(){
      if(this.emailData.email === ""){
        this.$message.error("请输入正确的邮箱")
        return
      }
      var second = 60
      var bom = document.getElementById("getCode")
      bom.setAttribute("disabled","")
      bom.innerText = `重新发送(${second})`
      console.log("aaa")
      getEmailCode({"email":this.emailData.email}).then(res=>{
        res = res.data
        if(res.success === false){
          this.$message.error("获取验证码失败")
        }else {
          this.$message.success("验证码已发送到您的邮箱")
        }
      }).catch(err=>{
        if(res.success === false){
          this.$message.error("获取验证码失败")
        }
        console.log(err)
      })
      var ff = ()=>{
        second -= 5
        bom.innerText = second > 0  ? `重新发送(${second})` : `获取验证码`
        if(second === 0){ bom.removeAttribute("disabled");clearInterval(timecount)}
      }
      var timecount =  setInterval(ff,1000)

    }
  }
  // todo 这里登录重置方法没有放到组合式api里


}

</script>

<style scoped lang="less">
#login-method{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  div{
    height: 100%;
    width: 50%;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid  #d8d8d8;
  }
  div :hover{
    background-color: #83E1B7;
  }
  #bypwd{
    border-right: 1px solid #d8d8d8;
  }
  div.checkmethod{
    background-color: #409EFF;
  }
}
.loginbutton{
  text-align: center;
  transform: translate(-6%);
  margin-bottom: 10px;
}
  .login-container{
    width: 100%;
    height: 100%;
    background-color: #264A6B;
  }
  .login-box{
    width: 550px;
    height: 350px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

  }
  .log-img{
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 150px;
    width: 150px;
    padding: 10px;
    border-radius: 50%;
    border: 1px #ECEEED;
    box-shadow: 0 0 10px #ddd;
    background-color: #fff;
    img{
      background-color: #ECEEED;
      height: 150px;
      width: 150px;
      border-radius: 50%;
    }
  }
  .login-form{
    width: 90%;
    position: absolute;
    bottom: 30px;
  }

</style>